import React, { Component } from 'react'

class Header extends Component {
  render() {

    console.log(this.props);
    // 在 *类* 组件中，通过 this.props 可以直接获取父组件传递的数据
    return <header>头部组件 -- {this.props.name} -- {this.props.num + 1} </header>
  }
}


function Content(props) {

  // 在函数式组件中没有 this
  // console.log(this);

  console.log(props);

  return (<>
    <h1>内容组件 -- {props.title} </h1>
  </>)
}

export default class App extends Component {

  state = {
    title: '辣条'
  }

  obj = {
    a: 1,
    b: 2,
    c: 3
  }

  render() {
    return (
      <div>
        父级组件
        <hr />
        {/* 跟 vue 传值的时候是一样的，只要不是纯字符串都要加 {} */}
        <Header name={this.state.title} num={'18'} />
        <hr />

        <Content user={{
          name: '张三',
          age: 18,
          sex: false
        }}
          title='嘿嘿嘿嘿'
          obj={this.obj}
        />

      </div>
    )
  }
}
